<template>
  <div>
    <div class="btn_group">
      <div>
        <we-button class="mg_r_20"  size="small" @click="prevPerson">
          上一位
        </we-button>
<!--        <span class="mg_r_20" style="cursor:pointer;"></span>-->
        <el-select v-model="index" placeholder="请选择" size="mini" class="mg_r_20" @change="personChange" style="width:100px;">
          <el-option
            v-for="(item,index) in uuids"
            :key="index"
            :label="item.name"
            :value="index">
          </el-option>
        </el-select>
        <we-button class="mg_r_20" size="small" @click="nextPerson">
          下一位
        </we-button>
        <!--<we-button ref='batchPrinting' type="primary" size="small" >
          批量打印
        </we-button>-->
        <we-button @click="handleExportMore" type="primary" size="small">
          批量导出
        </we-button>
      </div>
      <div>
        <we-button v-print="'#printTest'" size="mini">
          打印
        </we-button>
        <we-button @click="getPdf('printTest', '我是PDF')" size="mini">
          预览
        </we-button>
        <we-button type="primary" @click="handleExportOne" size="mini">
          导出Excel
        </we-button>
      </div>
    </div>

<div id = 'printTest' style="width: 800px">
    <div>
      <h2>干部任免审批表</h2>
      <div class="block_line flex_start" style="margin-top:20px;">
        <div class="form_table" style="flex:2">
          <el-row>
            <el-col :span="8">
              <p>姓名</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].name:'暂无' }}</p>
            </el-col>
            <el-col :span="8">
              <p>性别</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].sex_dictText:'暂无' }}</p>
            </el-col>
            <el-col :span="8">
              <p>出生年月</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].birthday:'暂无' }}</p>
            </el-col>
          </el-row>
          <el-row class="mar_row">
            <el-col :span="8">
              <p>民族</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].national_dictText:'暂无' }}</p>
            </el-col>
            <el-col :span="8">
              <p>籍贯</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].origin:'暂无' }}</p>
            </el-col>
            <el-col :span="8">
              <p>出生地</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].birthplace:'暂无' }}</p>
            </el-col>
          </el-row>
          <el-row class="mar_row">
            <el-col :span="8">
              <p>入党时间</p>
              <p class="form_item">{{ personnelMsg.OpPartyPunishment && personnelMsg.OpPartyPunishment.length?personnelMsg.OpPartyPunishment[0].punishmentRevocationTime:"暂无"}}</p>
            </el-col>
            <el-col :span="8">
              <p>参加工作时间</p>
              <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].workDay:"暂无" }}</p>
            </el-col>
            <el-col :span="8">
              <p>健康状态</p>
              <p class="form_item">**</p>
            </el-col>
          </el-row>
          <el-row class="mar_row">
            <el-col :span="8">
              <p>专业技术职务</p>
              <p class="form_item">**</p>
            </el-col>
            <el-col :span="8">
              <p>熟悉专业有何专长</p>
              <p class="form_item">**</p>
            </el-col>
          </el-row>
        </div>
        <div class="photo" style="flex:1">
<!--          <el-image class="photo" :src="photoBase64"></el-image>-->
          <el-image class="photo" :src="img"></el-image>
        </div>
      </div>
    </div>

    <div class="block_line flex_start" style="margin-top:40px;">
      <div class="form_table" style="flex:2">
        <el-row>
          <el-col :span="8">
            <p style="text-decoration:underline;">学历学位</p>
          </el-col>
        </el-row>
        <div v-for="(item,index) in personnelMsg.OpStaffDegree" :key="index">
          <el-row class="mar_row">
            <el-col :span="8">
              <p>教育类别</p>
              <p class="form_item">{{ item.educationType_dictText }}</p>
            </el-col>
            <el-col :span="8">
              <p>毕业院校系及专业</p>
              <p class="form_item">{{ item.graduateSchool+item.subjectDesc }}</p>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="flex:1"></div>
    </div>

    <div class="block_line flex_start" style="margin-top:40px;">
      <div class="form_table" style="flex: 2">
        <el-row>
          <el-col :span="8">
            <p>现任职务</p>
            <p class="form_item">{{ personnelMsg.baseStaff && personnelMsg.baseStaff.length?personnelMsg.baseStaff[0].position:'暂无' }}</p>
          </el-col>
          <el-col :span="8">
            <p>拟任职务</p>
            <p class="form_item">**</p>
          </el-col>
          <el-col :span="8">
            <p>拟免职务</p>
            <p class="form_item">**</p>
          </el-col>
        </el-row>
        <el-row class="mar_row">
          <el-col :span="14">
            <p>简历</p>
            <p class="form_item">***</p>
          </el-col>
        </el-row>
      </div>
      <div style="flex: 1"></div>
    </div>

    <div class="block_line flex_start" style="margin-top:40px;">
      <div class="form_table" style="flex: 2" v-for="(item,index) in personnelMsg.OpReward" :key="index">
        <el-row>
          <el-col :span="8">
            <p>奖励名称</p>
            <p class="form_item">{{ item.rewardName }}</p>
          </el-col>
          <el-col :span="8">
            <p>奖励日期</p>
            <p class="form_item">{{ item.rewardTime }}</p>
          </el-col>
          <el-col :span="8">
            <p>奖励原因</p>
            <p class="form_item">{{ item.rewardReason_dictText }}</p>
          </el-col>
        </el-row>
      </div>
      <div style="flex: 1"></div>
    </div>

    <div class="block_line flex_start" style="margin-top:40px;">
      <div class="form_table" style="width: 100%">
        <el-row>
          <el-col :span="8">
            <p style="text-decoration:underline;">家庭主要陈冠及重要社会关系</p>
          </el-col>
        </el-row>
        <el-row style="line-height:55px;background:#f2f2f2;margin-top:25px;padding-left:15px;">
          <el-col :span="4">
            <p>称谓</p>
          </el-col>
          <el-col :span="4">
            <p>姓名</p>
          </el-col>
          <el-col :span="4">
            <p>年龄</p>
          </el-col>
          <el-col :span="4">
            <p>职务/岗位</p>
          </el-col>
          <el-col :span="8">
            <p>工作单位及职务</p>
          </el-col>
        </el-row>
        <div v-for="item in personnelMsg.OpFamilyMemberSocialRelations" :key="item.uuid">
        <el-row style="line-height:55px;padding-left:15px;">
          <el-col :span="4">
            <p>{{item.named}}</p>
          </el-col>
          <el-col :span="4">
            <p>{{item.userName}}</p>
          </el-col>
          <el-col :span="4">
            <p>{{ getYear(item.birth) }}</p>
          </el-col>
          <el-col :span="4">
            <p>xxx</p>
          </el-col>
          <el-col :span="8">
            <p>{{item.companyAndPost}}</p>
          </el-col>
        </el-row>
        </div>
      </div>
    </div>

    <div class="block_line flex_start" style="margin-top:40px;">
      <div class="form_table" style="flex: 2" v-for="(item,index) in personnelMsg.OpPartyPunishment" :key="index">
        <el-row>
          <el-col :span="8">
            <p>惩罚情况</p>
            <p class="form_item">{{ item.punishmentNameId_dictText }}</p>
          </el-col>
          <el-col :span="8">
            <p>处分日期</p>
            <p class="form_item">{{ item.punishmentTime }}</p>
          </el-col>
          <el-col :span="8">
            <p>处分原因</p>
            <p class="form_item">{{ item.punishmentReasonId_dictText }}</p>
          </el-col>
        </el-row>
      </div>
      <div style="flex: 1"></div>
    </div>

    <div class="block_line" style="margin-top:40px;padding:20px 15px;">
      <p>呈报单位</p>
      <p style="text-align:right;margin-top:115px;margin-right:50px;">年<span style="margin:0 30px;">月</span>日</p>
    </div>
    <div class="block_line flex_start" style="margin-top:40px;padding:20px 15px;">
      <div style="flex:1">
        <p>审核机关意见</p>
        <p style="text-align:right;margin: 115px 110px 15px 0">（盖章）</p>
        <p style="text-align:right;margin-right:100px;">年<span style="margin:0 30px;">月</span>日</p>
      </div>
      <div style="flex:1">
        <p>行政机关任免意见</p>
        <p style="text-align:right;margin: 115px 50px 15px 0">（盖章）</p>
        <p style="text-align:right;margin-right:40px;">年<span style="margin:0 30px;">月</span>日</p>
      </div>
    </div>

    <div style="height:40px"></div>

</div>
  </div>

</template>

<script>
import WeButton from '@/components/WeButton'
import WePagination from '@/components/WePagination'
import { parseTree } from '@/utils/util'
import { getAction, postAction, deleteAction } from '@/api/manage'
import {baseStaff} from "@/api/apiUrl";
export default {
  name: 'BatchPrinting',
  components: {
    WeButton,
    WePagination
  },
  data () {
    return {
      pagination: {
        total: 10, // 总数据条数
        pageSize: 10, // 每页条数
        pageNum: 1 // 当前页
      }, // 列表分页数据
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value: '',
      img: 'https://d1icd6shlvmxi6.cloudfront.net/gsc/BJI16L/7c/6c/e3/7c6ce3fe96524784a51babe8e28e01db/images/%E6%B7%BB%E5%8A%A0%E4%BA%BA%E5%91%98%E4%BF%A1%E6%81%AF/u1578.png?token=6ea1095250caf21c3cca1314fb186925840787546886650a902a99377ba94602',
      personnelMsg: {},
      uuids:[],
      index:0,
      photoBase64: ''
    }
  },
  mounted () {
    this.uuids = JSON.parse(localStorage.getItem("person").split(','))
    this.getPersonnel()
  },
  methods: {
    getYear(date) {
      let newDate = new Date().getFullYear()
      let year = newDate - new Date(date).getFullYear()
      return year
    },
    getPersonnel () {
      postAction(baseStaff.selectInfoByUuid,{
        uuid:this.uuids[this.index].id
      })
        .then((result) => {
          if (result.code === 200) {
            this.personnelMsg = result.data
            this.img = result.data.baseStaff && result.data.baseStaff.length
            && result.data.baseStaff[0].photo ?  result.data.baseStaff[0].photo : 'https://d1icd6shlvmxi6.cloudfront.net/gsc/BJI16L/7c/6c/e3/7c6ce3fe96524784a51babe8e28e01db/images/%E6%B7%BB%E5%8A%A0%E4%BA%BA%E5%91%98%E4%BF%A1%E6%81%AF/u1578.png?token=6ea1095250caf21c3cca1314fb186925840787546886650a902a99377ba94602'
            // if(result.data.baseStaff && result.data.baseStaff.length) {
            //   this.urlToBase64(result.data.baseStaff[0].photo, res => {
            //     console.log(res)
            //     this.photoBase64 = res
            //   })
            // }
          }
        })
    },
    personChange(e){
      this.index = e
      this.getPersonnel()
      console.log(e)
    },
    prevPerson(){
      if(this.index>0){
        this.index--
        this.getPersonnel()
      }else{
        this.$message('当前已是第一位');
      }
    },
    nextPerson(){
      if(this.index<this.uuids.length-1){
        this.index++
        this.getPersonnel()
      }else{
        this.$message('当前已是最后一位');
      }
    },
    batchPrinting () { // 批量打印
    //    var localPrint = function localPrint() {
    //   if (closeBtn) {
    //     closeBtn = false;
    //     new printarea_default({
    //       ids: id,
    //       // * 局部打印必传入id
    //       standard: '',
    //       // 文档类型，默认是html5，可选 html5，loose，strict
    //       extraHead: binding.value.extraHead,
    //       // 附加在head标签上的额外标签,使用逗号分隔
    //       extraCss: binding.value.extraCss,
    //       // 额外的css连接，多个逗号分开
    //       popTitle: binding.value.popTitle,
    //       // title的标题
    //       endCallback: function endCallback() {
    //         // 调用打印之后的回调事件
    //         closeBtn = true;
    //       }
    //     });
    //   }
    // };
    },
    /** 导出Excel
     *
     */
    handleExportOne() {

    },
    /** 批量导出
     *
     */
    handleExportMore() {

    },
    /**
     * @Description: 图片转base64
     * @Date: 2021/6/17
     * @param: img链接，回调
     * @return: callback(base64)
     */
    urlToBase64(imgUrl, callback) {
      let xhr = new XMLHttpRequest()
      xhr.open('get', imgUrl, true)
      // 至关重要
      xhr.responseType = 'blob'
      xhr.onload = function() {
        if (this.status === 200) {
          //得到一个blob对象
          let blob = this.response
          // 至关重要
          let oFileReader = new FileReader()
          oFileReader.onloadend = function(e) {
            // 此处拿到的已经是 base64的图片了
            let base64 = e.target.result
            callback(base64)
          }
          oFileReader.readAsDataURL(blob)
        }
      }
      xhr.send()
    }
  }

}

</script>

<style scoped>

html, body, div {
  font-size: 14px;
}
.btn_group {
  display: flex;
  justify-content: space-between;
}
.mg_r_20 {
  margin-right: 20px;
}
h2 {
  margin-top: 50px;
  font-size: 20px;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}
.block_line {
  width: 800px;
  box-sizing: border-box;
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 6px;
  margin-top: 40px;
}
.flex_start {
  display: flex;
  justify-content: flex-start;
}
.form_item {
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.6);
}
.form_table {
  padding: 20px 15px;
}
.photo {
  width: 120px;
  height: 148px;
}
.mar_row {
  margin-top: 35px;
}
</style>
